<template>
  <div class="a">
    <header>首页</header>
    <el-row :gutter="10"  >
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
        <div class="grid-content bg-purple-dark">
            <div class="top">
                {{userCount}}
            </div>
            <div class="bottom">
                <span class="el-icon-user-solid"></span>
                用户总数
            </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
        <div class="grid-content bg-purple">
            <div class="top">
                {{productCount}}
            </div>
            <div class="bottom">
                <span class="el-icon-s-fold"></span>
                商品总数
            </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
        <div class="grid-content bg-purple-light">
            <div class="top">
                {{orderCount}}
            </div>
            <div class="bottom">
                <span class="el-icon-success"></span>
                订单总数
            </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {totalCount} from '../../util/netWork'
export default {
  data:()=>({
      userCount:'',
      productCount:'',
      orderCount:''
      // obj:{}
    }),
  mounted(){
    totalCount().then(res=>{
      // window.console.log(res.data)
      if(res.status==0){
        this.userCount= res.data.userCount,
        this.productCount= res.data.productCount,
        this.orderCount= res.data.orderCount
        
      }else{
        alert(res.msg)
      }
    })
  }
};
</script>

<style lang="scss" scoped>
@import  '@/assets/mixinScss.scss';
header{
     
      @include FontSize(30px);
      @include Size(100%,100px);
      line-height: 100px;
      box-sizing: border-box;
      padding-left: 20px;
  }
 .el-col {
    border-radius: 4px;
    @include Margin(0,4%);
    @include Font(20px,white);
    text-align: center;
    
  }
  .bg-purple-dark {
    background: rgb(240, 173, 78);
  }
  .bg-purple {
    background:rgb(92 , 184, 92)
  }
  .bg-purple-light {
    background: rgb(76, 177, 207);
  }
  .grid-content {
    border-radius: 4px;
    height: 150px;
    
  .top{
        @include Size(100%,60%);
        line-height: 100px;
    }
    .bottom{
        height: 40%;
        line-height: 50px;
    }
  }
</style>